import React, { Component } from "react";

export default class index extends Component {
  constructor(props) {
    super(props);
    this.age = 2;
    this.state = {
      count: 1,

      music: {
        id: "01001",
        name: "分手快乐！",
      },
    };
  }

  componentDidUpdate() {
    console.log("componentDidUpdate");
  }

  //   比较两个对象的内容（值）是否一样

  compareObj(obj1, obj2) {
    if (typeof obj1 !== "object" && typeof obj2 !== "object") {
      return obj1 === obj2;
    } else if (typeof obj1 === "object" && typeof obj2 !== "object") {
      return false;
    } else if (typeof obj1 !== "object" && typeof obj2 === "object") {
      return false;
    }

    for (let key in obj1) {
      if (typeof obj1[key] === "object") {
        if (this.compareObj(obj1[key], obj2[key]) === false) {
          return false;
        }
      } else {
        if (obj1[key] !== obj2[key]) {
          return false;
        }
      }
    }

    return true;
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log("shouldComponentUpdate");
    // console.log("nextState",nextState);
    // if(新旧状态不一样){
    //     return true;
    // }

    if (!this.compareObj(this.state, nextState)) {
      return true;
    }
    return false;
  }

  changeCount = () => {
    // 在react的类组件里，只要调用setState函数，就会引起组件的更新（不论是否修改了状态，也不论数据是否在模板上使用）。因为，setState内部调用了render函数。

    this.setState({
      // count: this.state.count+2,
    });
  };

  render() {
    console.log("render");
    return (
      <div>
        <h1>性能优化（自己实现shouldComponentUpdate函数的代码）</h1>
        <p>count:{this.state.count}</p>
        <input type="button" value="修改count" onClick={this.changeCount} />
      </div>
    );
  }
}
